

<template>
  <div class="container" id="container"></div>
</template>

<script  lang="ts" setup>
import {onMounted, reactive } from 'vue';
import * as THREE from 'three';
console.log(THREE)
const state = reactive({
  scene:null as any,//场景
  camera:null,//相机
  renderer:null,//渲染器
  controls:null,//轨道控制器
})

const render = () =>{
  //1.创建场景
  state.scene = new THREE.Scene();
}

onMounted(()=>{
  render()
})
</script>


<style scoped>
*{
  margin: 0;
  padding: 0;
}
.container{
  
  width:100vw;
  height: 100vh;
  background-color: red;
}
</style>
